Icon font knoppen

Probleem

Een tijd geleden was er nog al wat discussie over het gebruik van icon fonts. Die moesten worden vervangen door svg icons. In een article Inline SVG vs Icon Fonts geschreven in mei 2017door Chris Coyier lees je de pro's en cons.

We gebruiken icoon-lettertype voor de knoppen maar willen dat het functioneel en informatief is. Dezelfde Chris Coyier schreef een interessant artikel daarover met de titel HTML for Icon Font Usage.

We beperken ons hier tot alleenstaande iconen. Dat wil zeggen dat je ervoor moet zorgen dat een screenreader het icoon op een juiste manier voorleest.

Onze twee doelstellingen zijn:

1. semantisch in orde;
2. goed leesbaar voor schermlezers (screen readers)

Oplossing

1. Een icon font maken met icomoon.io:
   
2. Een icon font wijzigen met icomoon.io:
   
3. De icon fonts een nieuwe code geven: soms is het nodig om de eerder gegenereerde codes te vervangen door nieuwe. In deze videoclip zie je hoe je dat doet:
   
4. We kopiëren het bestand style.css, dat we van IcoMoon gedownload hebben, naar de css map van de applicatie. We hernoemen dit bestand naar icon-font.css. De inhoud laten we zoals die is:

   1. De code om de font in te laden:

      @font-face {
        font-family: 'fric-frac';
        src:  url('fonts/fric-frac.eot?mcbv0d');
        src:  url('fonts/fric-frac.eot?mcbv0d#iefix') format('embedded-opentype'),
          url('fonts/fric-frac.ttf?mcbv0d') format('truetype'),
          url('fonts/fric-frac.woff?mcbv0d') format('woff'),
          url('fonts/fric-frac.svg?mcbv0d#fric-frac') format('svg');
        font-weight: normal;
        font-style: normal;
        font-display: block;
      }

   2. De klassenattribuut selector om de HTML elementen te selecteren waarin de iconen staan:

      [class^="icon-"], [class*=" icon-"] {
        /* use !important to prevent issues with browser extensions that change fonts */
        font-family: 'fric-frac' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

   3. En tenslotte voor elk icoontje een klasse, bv. voor het potlood en de vuilbak (ik heb wel de codes in IcoMoon gereset, zie viedoclip hierboven):

      .icon-pencil:before {
        content: "\e600";
      }
      .icon-bin:before {
        content: "\e602";
      }
      ...
      

5. Nu moeten we nog de icon fonts kopiëren. Kopieer in fric-frac-simple-crud/public/css/fonts de volgende bestanden:
   1. fric-frac.eot
   2. fric-frac.svg
   3. fric-frac.ttf
   4. fric-frac.woff
6. We zorgen er ook voor dat screen-readers kunnen lezen waarvoor de knop dient. De tekst in de knop willen we niet tonen, alleen het icoontje moet zichtbaar zijn. De tekst is wel belangrijk voor screenreaders. Een span element dat het icoonsymbool invoegt met een pseudo-element en tekst die ernaast staat, dat we visueel van de pagina verwijderen.

   <a href="Event/UpdadatingOne.php" class="tile">
     <span aria-hidden="true" class="icon-pencil"></span>
     <span class="screen-reader-text">Updating</span>
   </a>
   

7. Om de tekst van de pagina te verwijderen plaatsen we die buiten het webvenster. We voegen in app.css de volgende css toe:

   /* accessability */
   .screen-reader-text {
       /* Reusable, toolbox kind of class
           voor screen readers, op die manier
           kunnen de readers lezen waarvoor
           de knop staat; de tekst is zelf
           niet zichtbaar op het scherm door negatieve
           waarden toe te kennen aan top en left */
       position: absolute;
       top: -9999px;
       left: -9999px;
       display: inline-block; /* Fix for clickability issue in WebKit */ 
   }
   

Zelf een icon font maken

1. Je vindt allerlei iconen op:
   1. www.shareicon.net
   2. https://www.onlinewebfonts.com/icon/
   3. http://www.iconarchive.com/
   4. https://iconmonstr.com/ (is een goede site)
2. Vertrek van een bestaande font. Zoek bijvoorbeeld op Share Icon.
3. Bewerk de SVG op Vecteezy, Discover & Download Free Vector Art!
4. Font-iconen hebben best maar één kleur. Download de SVG van Vecteezy als een png bestand.
5. Open het PNG bestand in Lunapic om de achtergrond transparent te maken.
6. Gebruik Online-Convert om de PNG terug om te zetten naar SVG